<template>
	<view class="order">
		<view class="order_item">
			<view class="order_title">
				<view class="order_name">
					<u-cell
						:title="`${moreOrderList.shopName}`"
						:border='false'
						:value="moreOrderList.deskName"
					>
						<u-avatar
							slot="icon"
							shape="circle"
							size="28"
							v-show="moreOrderList.dto.shopLogoUrl"
							:src="imgUrl + '/file/getLoadImg/' + moreOrderList.dto.shopLogoUrl"
							customStyle="margin: -3px 8px -3px -8px"
						></u-avatar>
					</u-cell>
				</view>
				<u-tag v-if="moreOrderList.status == 1" borderColor='#fff' color='#e63e31' plain text="已下单" ></u-tag>
				<u-tag v-if="moreOrderList.status == 2" borderColor='#fff' color='#307dee' plain text="已支付" ></u-tag>
				<u-tag v-if="moreOrderList.status == 3" borderColor='#fff' color='#777777' plain text="已取消" ></u-tag>
				<u-tag v-if="moreOrderList.status == 4" borderColor='#fff' color='#1aa034' plain text="已结束" ></u-tag>
			</view>

			<view class="order_info">
				<view class="order_goods">
					<u-row customStyle="margin-bottom: 10px" v-for="i in moreOrderList.detailList">
						<u-col span="4">
							<view class="bg-purple-light">{{i.dishesName}}</view>
						</u-col>
						<u-col span="4">
							<view class="bg-purple">{{i.dishesTypeName}}</view>
						</u-col>
						<u-col span="2">
							<view class="bg-purple">{{i.quantity}}{{i.unit}}</view>
						</u-col>
						<u-col span="2">
							<view class="bg-purple" style="text-align: right;">{{ getPrice(i) }}</view>
						</u-col>
					</u-row>
				</view>
				<view class="order_price">
					<view>
						订单号:
						<text>{{ moreOrderList.orderNumber ? moreOrderList.orderNumber.slice(1) : '' }}</text>
					</view>
					<view >
						合计￥
						<text>{{ moreOrderList.amountAfterDiscount.toFixed(2) }}</text>
					</view>
				</view>
				<u-divider></u-divider>
				<view>
					<u-row  justify="space-between"
						gutter="6">
						<u-col span="8">
							<u--text prefixIcon="clock" iconStyle="font-size: 16px" :text="moreOrderList.createTime"></u--text>
						</u-col>
						<u-col span="1">
							
						</u-col>
						<u-col span="3">
							<u-button v-if="moreOrderList.status == 1" @click="addDishes(moreOrderList)" size="small" shape="circle" type="warning" text="加餐"></u-button>
							<!-- <u-button v-if="item.status === 1" @click="toPay(item)"  size="small" shape="circle" type="primary" text="支付"></u-button> -->
							<!-- <u-button v-if="moreOrderList.status === 2" @click="clearDesk(moreOrderList)"  size="small" shape="circle" type="success" text="清台"></u-button> -->
						</u-col>
					</u-row>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: 'Hello',
			userInfo: uni.getStorageSync('userInfo'),
			moreOrderList: {},
			imgUrl:''
		};
	},
	onShow() {
		this.imgUrl = this.$url;
	},
	onLoad(option) {
		this.moreOrderList = JSON.parse(decodeURIComponent(option.data))
		// this.$http({
		// 	url: `/miniapp/order/${val.id}`,
		// 	method: 'GET'
		// }).then(res => {
		// 	this.moreOrderList = res.data
		// })
	},
	methods: {
		addDishes(item){
			uni.navigateTo({
				url: `/pages/index/index?shopId=${item.shopId}&deskId=${item.deskId}&orderId=${item.id}`
			});
		},
		getPrice(val) {
			return (val.quantity * val.dishesPrice).toFixed(2);
		},
		// clearDesk(e){
		// 	var that = this;
		// 	uni.showModal({
		// 		title:'提示',
		// 		content:'确定要清台吗？',
		// 		success:res=> {
		// 			if(res.confirm){
		// 				that.$http({
		// 					url: `/empapp/order/status/${e.id}`,
		// 					method: 'GET',
		// 				}).then(resData => {
		// 					if(resData.httpCode !== '200'){
		// 						this.getOrederList()
		// 						uni.showToast({
		// 							title:resData.message,
		// 							icon:"none"
		// 						})
		// 					}
		// 				})
		// 			}
		// 		}
		// 	})
			
		// },
	}
};
</script>

<style scoped>
.order {
	width: 100%;
	min-height: 100vh;
	background-color: #f0f0f0;
	padding-top: 20rpx;
}
.order_item {
	width: 700rpx;
	border-radius: 10rpx;
	background-color: #fff;
	margin: 20rpx;
	padding: 30rpx 20rpx 10rpx;
}
.order_title {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.order_name {
	display: flex;
	align-items: center;
	font-weight: 600;
}
.order_name > image {
	width: 100rpx;
	height: 100rpx;
	margin-right: 20rpx;
	border-radius: 48rpx;
	background-color: #f0f0f0;
}
.order_status {
	font-size: 28rpx;
}
.order_info {
	margin: 20rpx auto;
}
.order_time {
	font-size: 22rpx;
	color: #515151;
	font-weight: 100;
}
.order_price {
	display: flex;
	justify-content: space-between;
	/* padding: 0 20rpx; */
	font-size: 28rpx;
}
.order_price>text{
	font-weight: bold;
}
.order_goods {
	padding: 0rpx 20rpx;
	/* background-color: #f0f0f0; */
	width: 100%;
	font-size: 28rpx;
}
.order_amounts {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 20rpx auto;
	font-size: 28rpx;
}
.order_amounts text {
	font-size: 32rpx;
	font-weight: bold;
}
.btn_add {
	width: 180rpx;
	height: 60rpx;
	border: 2rpx solid #4ab962;
	border-radius: 10rpx;
	font-size: 30rpx;
	float: right;
	color: #4ab962;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
}
.more_goods {
	display: flex;
	justify-content: space-between;
	text-align: right;
	margin-bottom: 20rpx;
}
.more_goods>view{
	width: 100rpx;
}
</style>
